<!-- file upload test -->
<script setup lang="ts">
  import { ref } from 'vue'
  import Markdown from '@/components/Markdown.vue'
  import TxtContainer from '@/components/previewFile/txt-container.vue'
  import CsvContainer from '@/components/previewFile/csv-container.vue'
  import DocxContainer from '@/components/previewFile/docx-container.vue'
  import CodeContainer from '@/components/previewFile/code-container.vue'

  const prefile = ref()
  const fileEnd = ref('')
  const errorText = ref('')
  const upload = async () => {
    const formData = new FormData()
    // formData.append('file', file.value)
    console.log('upload')
  }
  const change = (e: Event) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    const fileName = file?.name;
    fileEnd.value = fileName?.slice(fileName.lastIndexOf(".")).toLowerCase(); // 获取文件扩展名
    if (['.txt' , '.csv', '.html', '.doc', '.docx', '.py', '.ts', '.js', '.cs', '.cpp'].includes(fileEnd.value) ) {
      prefile.value = file;
    } else if(fileEnd.value === '.md') {
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = () => {
        prefile.value = reader.result
      }
    } else  if(['.pdf'].includes(fileEnd.value)){
      const url = URL.createObjectURL(file);
      prefile.value = url;
    } else {
      errorText.value = '只能预览 .md,.pdf,.txt,.doc,.docx,.csv,.html,.py,.ts,.js,.cs,.cpp 格式的文件';
    }
  }
  const remove = () => {
    prefile.value = undefined
  }
  const clear = () => {
    prefile.value = undefined
  }
  const clearAll = () => {
    prefile.value = undefined
  }

</script>

<template>
  <div class="header">
    <input type="file" @change="change" />
    <button @click="upload">upload</button>
    <button @click="remove">remove</button>
    <button @click="clear">clear</button>
    <button @click="clearAll">clearAll</button>
  </div>
  <div class="content">
      <!-- txt -->
      <TxtContainer v-if="fileEnd == '.txt'" :file="prefile" />
      <!-- md -->
      <Markdown v-else-if="fileEnd == '.md'" :source="prefile" />
      <!-- docx -->
      <DocxContainer v-else-if="fileEnd == '.docx' || fileEnd == '.doc'" :file="prefile" />
      <!-- csv -->
      <CsvContainer v-else-if="fileEnd == '.csv'" :file="prefile" :languageType="'csv'" />
      <!-- html -->
      <CodeContainer v-else-if="['.html', '.cpp', '.ts','.py', '.js', '.cs', '.cpp' ].includes(fileEnd)" :languageType="fileEnd.replace('.','')" :file="prefile" />
      <!-- iframe -->
      <IframeContainer v-else-if="['.pdf', '.html'].includes(fileEnd)" :file="prefile" />
      <div class="no-support-wrapper" v-else>
        <span>{{ errorText }}</span>
      </div>
  </div>
</template>

<style scoped>
.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;

  button {
    margin-right: 10px;
  }
}
.content {
  height: calc(100vh - 50px);
  width: 100%;
  overflow: auto;
}
</style>
